<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            display: flex;
        }
        p span {
            width: 90px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #000;
            margin-right: 20px;
        }
    </style>
</head>
<body>

    <!-- <p>
        <span>1x1=1</span>
    </p>
    <p>
        <span>1x1=1</span>
        <span>1x1=1</span>
    </p>
    <p>
        <span>1x1=1</span>
        <span>1x1=1</span>
        <span>1x1=1</span>
    </p> -->


    <script>

        // 9行
        // for(var i = 1 ; i < 10 ; i++) {   // 行数
        //     // 表达式
        //     for(var j = 1 ; j <= i ; j++) {
        //         if(i * j >= 10) {
        //             document.write(j + 'x' + i + '=' + i * j + '&nbsp;&nbsp;&nbsp;') ;
        //         }
        //         else {
        //             document.write(j + 'x' + i + '=' + i * j + '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;') ;
        //         }
                
        //     }
        //     // 换行
        //     document.write('<br>');
        // }



        // 9行   9个p
        for(var i = 1 ; i < 10 ; i++) {
            document.write('<p>') ;
            for(var j = 1 ; j <= i ; j++) {
                document.write('<span>' + j + ' x ' + i + ' = ' + i * j + '</span>') ;
            }
            document.write('</p>') ;
        }


        // i = 1 
        //   j = 1


        // i = 2
        //   j = 1
        //   j = 2

        // i = 3
        //   j = 1
        //   j = 2
        //   j = 3

    </script>
    
</body>
</html>